<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* 居中显示 */
            margin: auto;
        }
        .d1{
            background-color: lightblue;
            /* 将块级元素转成行内元素，丢失原有的块级元素特征 */
            /* display: inline; */
            /* 行块级元素，保留原有的宽高设置，不换行 */
            /* display: inline-block; */
        }
        .d2{
            background-color: lightcoral;
            /* 行块级元素，保留原有的宽高设置，不换行 */
            /* display: inline-block; */
        }

        .s1{
            /* 将行级元素转换成块级元素 */
            display: block;
            width: 300px;
            height: 200px;
            background-color: lightgreen;
            /* 文本居中显示 */
            text-align: center;
        }

        img{
            /* 隐藏当前元素，display: none; 直接在当前页面中去掉该元素 */
            /* display: none; */

            /* 隐藏当前元素，visibility: hidden; 仍然占据原有位置 */
            /* visibility: hidden; */
        }


    </style>
</head>
<body>
    <!-- 块级元素：默认换行，可以设置宽高 -->
    <div class="d1"></div>
    <div class="d2"></div>

    <!-- 行内元素：不换行，部分可以设置宽高 -->
    <span class="s1">今天晚上有作业</span>
    <img src="./img/2.jpg" alt="" width="100px" height="100px">
    <input type="text" />
</body>
</html>    